﻿<style type="text/css">
     #dropZone
     {
         border-radius: 5px;
         border: 2px solid #ccc;
         background-color: #eee;
         width: 250px;
         padding: 50px 0;
         text-align: center;
         font-size: 18px;
         color: #555;
         margin: 50px auto;
     }

     #dropZone.hover
     {
         border-color: #aaa;
         background-color: #ddd;
     }

     #dropZone.error
     {
         border-color: #f00;
         background-color: #faa;
     } 
 </style>



    <div id="dropZone">
        Drop File Here to Upload.
    </div>








@section scripts
{
     <script type="text/javascript">
        var dropZone;

        // Initializes the dropZone
        $(document).ready(function () {
            dropZone = $('#dropZone');
            dropZone.removeClass('error');

            // Check if window.FileReader exists to make 
            // sure the browser supports file uploads
            if (typeof(window.FileReader) == 'undefined') {
                dropZone.text('Browser Not Supported!');
                dropZone.addClass('error');
                return;
            }

            // Add a nice drag effect
            dropZone[0].ondragover = function () {
                dropZone.addClass('hover');
                return false;
            };

            // Remove the drag effect when stopping our drag
            dropZone[0].ondragend = function () {
                dropZone.removeClass('hover');
                return false;
            };

            // The drop event handles the file sending
            dropZone[0].ondrop = function(event) {
                // Stop the browser from opening the file in the window
                event.preventDefault();
                dropZone.removeClass('hover');

                // Get the file and the file reader
                var file = event.dataTransfer.files[0];

                // Send the file
                var xhr = new XMLHttpRequest();
                //    xhr.upload.addEventListener('progress', uploadProgress, false);
                xhr.onreadystatechange = stateChange;
                xhr.open('POST', 'Home/handleFileUpload', true);
                xhr.setRequestHeader('X-FILE-NAME', file.name);
                xhr.send(file);

            };
        });

        // Show the upload progress
        function uploadProgress(event) {
            var percent = parseInt(event.loaded / event.total * 100);
            $('#dropZone').text('Uploading: ' + percent + '%');
        }

        // Show upload complete or upload failed depending on result
        function stateChange(event) {
            if (event.target.readyState == 4) {
                if (event.target.status == 200) {
                    $('#dropZone').text('Upload Complete!');
                    window.location = xhr.responseText;
                }
                else {
                    dropZone.text('Upload Failed!');
                    dropZone.addClass('error');
                }
            }
        }
    </script>
}
